<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>我的订单</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../../css/css.css" />
</head>
<style>
    .time {
        margin-right: 15px;
    }

    .yfh {
        color: red;
    }

    .dfh {
        color: red;
    }

    .dfk {
        color: red;
    }
    [v-cloak] {
        display: none;
    }
</style>

<body>
    <div v-cloak id="wrap" class="flex-wrap flex-vertical bg">
        <header>
            <ul>
                <li class="active">
                    <i onclick="back()" class="icon iconfont icon-back"></i>
                    <span>我的订单</span>
                </li>
            </ul>
        </header>
        <div class="orderpage fixed-header">
            <div class="neworder">
                <div class="neworderhead">
                    <div class="neworderhead1" @click="getid2(index,item.id)" :class="{hover:listtypehover==index+1}" v-for="(item,index) in listtype">
                        {{item.title}} <!-- <span class="dian" v-if="item.show"></span> -->
                    </div>
                </div>
                <div class="classno" v-if="list.length==0">
                    <i class="icon iconfont icon-wendang"></i>
                    <p>暂无订单</p>
                </div>
                <div v-for="(item,index) in list" v-if="list.length!=0">
                    <div class="neworderheads" v-if="item.status==1">
                        <div class="neworderhead2">
                            <span class="time">{{item.orderno}}</span>
                            <span class="time">{{item.createtime}}</span>
                        </div>
                        <div class="neworderheadc" v-for="(item2,index) in item.goods">
                            <div class="neworderheadcl">
                                <img v-if="item2.thumb==''" src="../../image/tupian1.jpg" alt="">
                                <img v-else src="../../image/logo.jpg" data-cache="no" :data-src="item2.thumb | filtersImg"
                                 alt="">
                                <p>{{item2.title}}</p>
                            </div>
                            <div class="neworderheadcr">
                                <p class="price">￥{{item2.price}}</p>
                                <p class="number">x{{item2.amount}}</p>
                            </div>
                        </div>
                        <div class="neworderheadb">
                            <div class="neworderheadbl">
                                <span class="status">交易成功</span>
                                <!--<p>已付总额:<span>￥{{item.realtotal}}</span></p>-->
                            </div>
                            <div class="neworderheadbr">
                                <p>应付总额:<span>￥{{item.paytotal}}</span></p>
                            </div>
                        </div>
                        <div class="bgf4"></div>
                    </div>
                    <div class="neworderheads" v-if="item.status==0">
                        <div class="neworderhead2">
                            <span class="time">{{item.orderno}}</span>
                            <span class="time">{{item.createtime}}</span>
                        </div>
                        <div class="neworderheadc" v-for="(item2,index) in item.goods">
                            <div class="neworderheadcl">
                                <img v-if="item2.thumb==''" src="../../image/tupian1.jpg" alt="">
                                <img v-else src="../../image/logo.jpg" data-cache="no" :data-src="item2.thumb | filtersImg"
                                 alt="">
                                <p>{{item2.title}}</p>
                            </div>
                            <div class="neworderheadcr">
                                <p class="price">￥{{item2.price}}</p>
                                <p class="number">x{{item2.amount}}</p>
                            </div>
                        </div>
                        <div class="neworderheadb">
                            <div class="neworderheadbl">
                                <span class="status dfk">待付款</span>
                                <!-- <p>已付总额:<span>￥160.00</span></p> -->
                            </div>
                            <div class="neworderheadbr">
                                <p>共2件 应付总额:<span>￥{{item.paytotal}}</span></p>
                            </div>
                        </div>
                        <div class="newcaozuo">
                            <div class="caozuo2" @click="ordercencelfun(item.orderno)">取消订单</div>
                            <div class="caozuo1" @click="payorder(item.orderno,item.paytotal)">立即付款</div>
                        </div>
                        <div class="bgf4"></div>
                    </div>
                    <div class="neworderheads" v-if="item.status==2">
                        <div class="neworderhead2">
                            <span class="time">{{item.orderno}}</span>
                            <span class="time">{{item.createtime}}</span>
                        </div>
                        <div class="neworderheadc" v-for="(item2,index) in item.goods">
                            <div class="neworderheadcl">
                                <img v-if="item2.thumb==''" src="../../image/tupian1.jpg" alt="">
                                <img v-else src="../../image/logo.jpg" data-cache="no" :data-src="item2.thumb | filtersImg"
                                 alt="">
                                <p>{{item2.title}}</p>
                            </div>
                            <div class="neworderheadcr">
                                <p class="price">￥{{item2.price}}</p>
                                <p class="number">x{{item2.amount}}</p>
                            </div>
                        </div>
                        <div class="neworderheadb">
                            <div class="neworderheadbl">
                                <!-- <p>已付总额:<span>￥160.00</span></p> -->
                                <span class="status dfh">待发货</span>
                            </div>
                            <div class="neworderheadbr">
                                <p>共{{item.goods.length}}件 应付总额:<span>￥{{item.paytotal}}</span></p>
                            </div>
                        </div>
                        <!--                         <div class="newcaozuo">
                                                <div class="caozuo2">提醒发货</div>
                                            </div> -->
                        <div class="bgf4"></div>
                    </div>
                    <div class="neworderheads" v-if="item.status==4||item.status==3">
                        <div class="neworderhead2">
                            <span class="time">{{item.orderno}}</span>
                            <span class="time">{{item.createtime}}</span>
                        </div>
                        <div class="neworderheadc" v-for="(item2,index) in item.goods">
                            <div class="neworderheadcl">
                                <img v-if="item2.thumb==''" src="../../image/tupian1.jpg" alt="">
                                <img v-else src="../../image/logo.jpg" data-cache="no" :data-src="item2.thumb | filtersImg"
                                 alt="">
                                <p>{{item2.title}}</p>
                            </div>
                            <div class="neworderheadcr">
                                <p class="price">￥{{item2.price}}</p>
                                <p class="number">x{{item2.amount}}</p>
                            </div>
                        </div>
                        <div class="neworderheadb">
                            <div class="neworderheadbl">
                                <!-- <p>已付总额:<span>￥160.00</span></p> -->
                                <span class="status yfh">已发货</span>
                            </div>
                            <div class="neworderheadbr">
                                <p>共{{item.goods.length}}件 应付总额:<span>￥{{item.paytotal}}</span></p>
                            </div>
                        </div>
                        <!--                         <div class="newcaozuo">
                                                <div class="caozuo1">确认发货</div>
                                            </div> -->
                        <div class="bgf4"></div>
                    </div>
                </div>
                <div class="nolist" v-show="finished">
                    已经没有更多啦
                </div>
            </div>
        </div>
        <div class="mask" :class="{show:jiesuan2}" @click="jiesuanfun2"></div>
        <div class="shoppingpay" v-if="jiesuan2">
            <div class="shoppingpay1">
                <span>请选择支付方式</span>
                <i class="icon iconfont icon-close" @click="jiesuanfun2"></i>
            </div>
            <div class="shoppingpaytitle">
                请在0小时30分内完成支付金额<span>￥{{total}}</span>元
            </div>
            <div class="payfs" :class="{checked:paytype==1}" @click="paytypefun(1)">
                <div class="zfb"><i class="icon iconfont icon-zhifubao"></i><span>支付宝</span></div>
                <div class="zfbcheck"><i class="icon iconfont icon-xuanzhong" v-if="paytype==1"></i></div>
            </div>
            <div class="payfs" :class="{checked:paytype==2}" @click="paytypefun(2)">
                <div class="zfb"><i class="icon iconfont icon-weixin"></i><span>微信支付</span></div>
                <div class="zfbcheck"><i class="icon iconfont icon-xuanzhong" v-if="paytype==2"></i></div>
            </div>
            <div class="add-dingdan mt10" @click="pay">
                确认
            </div>
        </div>
    </div>
</body>

</html>
<script src="../../aui/js/aui.js"></script>
<script src="../../script/vue2.js"></script>
<script src="../../script/vue-resource.min.js"></script>
<script src="../../script/common.js"></script>
<script type="text/javascript">
var vm = new Vue({
    el: "#wrap",
    data: {
        uid: '',
        page: 1,
        list: [],
        id: 0,
        title: '我的供应',
        pageNumber: 0,
        loading: false, //控制上拉加载的加载动画
        finished: false, //控制在页面往下移动到底部时是否调用接口获取数据
        isLoading: false, //控制下拉刷新的加载动画
        listtypehover: 1,
        orderno: '',
        jiesuan2: false,
        paytype: 1,
        total: 0,
        listtype: [{
            title: '全部',
            id: 'all',
            show: false
        }, {
            title: '待付款',
            id: 0,
            show: true
        }, {
            title: '待发货',
            id: 2,
            show: false
        }, {
            title: '待收货',
            id: 4,
            show: false
        }, ]
    },
    mounted: function() {
        var that = this;
        apiready = function() {
            var id = api.pageParam.name
            that.getid(id)
            that.getList(1)
            api.setStatusBarStyle({
                style: 'dark'
            });
            // api.setRefreshHeaderInfo({
            //     visible: true,
            //     bgColor: '#fff',
            //     textColor: '#666',
            //     textDown: '下拉刷新',
            //     textUp: '释放刷新'
            // }, function (ret, err) {
            //     that.onRefresh()
            // });
            api.addEventListener({ name: 'scrolltobottom' }, function(ret, err) {
                // that.toDoRequest();
                that.onLoad2()
            });
        };
    },
    methods: {
        paytypefun: function(e) {
            this.paytype = e

        },
        wxPay: function() {
            var that = this;
            showProgress();
            var token = $api.getStorage('userInfo').token
            var timestamp = (new Date()).getTime();
            var wxPay = api.require('wxPay');
            console.log(token, that.orderno)
            api.ajax({
                url: ajaxRoute.wxpay,
                method: 'post',
                data: {
                    values: {
                        token: token,
                        orderno: that.orderno
                    }
                }
            }, function(res, err) {
                console.log('===================---------------')
                console.log(JSON.stringify(res), 'ceshi')
                api.hideProgress();
                wxPay.payOrder(res, function(ret, err) {
                    if (ret.status) {
                        if (ret.status) {
                            api.alert({
                                title: '系统提示',
                                msg: '支付成功',
                            }, function(ret, err) {
                                if (ret) {
                                    that.getid(2)
                                    that.getList(1)
                                }
                            });
                        } else {
                            if (err.code == '-2') {
                                api.toast({
                                    msg: '用户取消'
                                });
                            } else {
                                api.toast({
                                    msg: '打赏失败'
                                });
                            }
                        }
                    } else {
                        api.toast({ msg: err.msg, location: 'middle' });
                    }
                });
            })
        },
        aliPay: function() {
            var that = this;
            var token = $api.getStorage('userInfo').token
            console.log(that.orderno)
            console.log('支付宝测试')
            api.ajax({
                url: ajaxRoute.alipay,
                method: 'post',
                data: {
                    values: {
                        token: token,
                        orderno: that.orderno
                    }
                },
                dataType: 'text'
            }, function(res, err) {
                console.log(JSON.stringify(res))
                api.hideProgress();
                var aliPayPlus = api.require('aliPayPlus');
                console.log(JSON.stringify(aliPayPlus))
                aliPayPlus.payOrder({
                    orderInfo: res
                }, function(ret, err) {
                    if (ret.code == '9000') {
                        api.alert({
                            title: '系统提示',
                            msg: '支付成功',
                        }, function(ret, err) {
                            if (ret) {
                                that.getid(2)
                                that.getList(1)
                            }
                        });
                    } else if (ret.code == '8000') {
                        api.alert({
                            msg: '正在处理中，支付结果未知',
                            buttons: ['确定']
                        });
                    } else if (ret.code == '4000') {
                        // $("#alert-sign-fail").show();
                    } else if (ret.code == '5000') {
                        api.alert({
                            msg: '重复请求',
                            buttons: ['确定']
                        });
                    } else if (ret.code == '6001') {
                        api.alert({
                            msg: '用户中途取消支付操作',
                            buttons: ['确定']
                        });

                    } else if (ret.code == '6002') {
                        api.alert({
                            msg: '网络连接出错',
                            buttons: ['确定']
                        });

                    } else if (ret.code == '6004') {
                        api.alert({
                            msg: '支付结果未知',
                            buttons: ['确定']
                        });
                    }
                });
            })
        },
        pay: function() {
            this.jiesuan2 = !this.jiesuan2
            if (this.paytype == 1) {
                console.log('1')
                this.aliPay()
            } else {
                console.log('2')
                this.wxPay()
            }
        },
        jiesuanfun2: function() {
            this.jiesuan2 = !this.jiesuan2
        },
        payorder: function(orderno, total) {
            console.log('========================')
            console.log(orderno)
            console.log('========================')
            this.orderno = orderno
            console.log(orderno)
            this.total = total
            this.jiesuan2 = true
            // this.pay()
        },
        getList: function(type) {
            var that = this;
            showProgress();
            that.finished = false
            var token = $api.getStorage('userInfo').token
            var uid = $api.getStorage('userInfo').id
            console.log(token, uid, 'ceshi')
            api.ajax({
                url: ajaxRoute.orderstatus,
                method: 'post',
                data: {
                    values: {
                        token: token,
                        page: that.page,
                        status: that.id
                    }
                }
            }, function(res, err) {
                api.hideProgress();
                console.log(JSON.stringify(res), 'sss')
                if (res.code == 1) {
                    if (type == 2) {
                        api.refreshHeaderLoadDone()
                    }
                    if (res.data.length == 0) {
                        api.toast({ msg: '暂无内容', location: 'middle' });
                    }
                    that.list = res.data
                    that.$nextTick(function() {
                        cacheDataImg2()
                    })
                } else if (res.code == 0) {
                    that.list = []
                } else {
                    api.toast({ msg: res.msg, location: 'middle' });
                }
            });
        },
        // 取消订单
        ordercencelfun: function(orderno) {
            var that = this;
            showProgress();
            var token = $api.getStorage('userInfo').token
            api.ajax({
                url: ajaxRoute.ordercencel,
                method: 'post',
                headers: {
                    'token': token
                },
                data: {
                    values: {
                        orderno: orderno,
                    }
                }
            }, function(res, err) {
                api.hideProgress();
                console.log(JSON.stringify(res))
                if (res.code == 1) {
                    api.toast({ msg: '取消订单成功', location: 'middle' });
                    that.onRefresh()
                } else {
                    api.toast({ msg: res.msg, location: 'middle' });
                }
            });
        },
        // 切换菜单
        getid2: function(index, id) {
            var that = this;
            that.id = id
            that.listtypehover = index + 1
            that.page = 1
            that.getList(1)
        },
        getid: function(id) {
            var that = this;
            that.id = id
            if (id == 0) {
                that.listtypehover = 2
                console.log(that.listtypehover, 'ss')
            }
            if (id == 2) {
                that.listtypehover = 3
            }
            if (id == 4) {
                that.listtypehover = 4
            }

            if (id == 1) {
                that.listtypehover = 1
            }
        },
        querenjiaoyi: function(type) {
            var that = this;
            var token = $api.getStorage('userInfo').token
            api.ajax({
                url: ajaxRoute.caiagree,
                method: 'post',
                data: {
                    values: {
                        token: token,
                        id: type,
                    }
                }
            }, function(res, err) {
                // alert(JSON.stringify(res));
                if (res.code == 1) {
                    api.toast({ msg: '确认成功', location: 'middle' });
                    that.getList(1)
                } else {
                    api.toast({ msg: res.msg, location: 'middle' });
                }
            });
        },
        querenfahuo: function(type) {
            var that = this;
            var token = $api.getStorage('userInfo').token
            api.ajax({
                url: ajaxRoute.gongdeliver,
                method: 'post',
                data: {
                    values: {
                        token: token,
                        id: type,
                    }
                }
            }, function(res, err) {
                // alert(JSON.stringify(res));
                if (res.code == 1) {
                    api.toast({ msg: '确认成功', location: 'middle' });
                    that.getList(1)
                } else {
                    api.toast({ msg: res.msg, location: 'middle' });
                }
            });
        },
        //下拉刷新
        onRefresh: function() {
            var that = this;
            setTimeout(function() {
                api.refreshHeaderLoadDone()
                that.page = 1
                that.getList(1)
            }, 1000);
        },
        onLoad2: function() {
            // 异步更新数据
            var that = this
            that.page++
            showProgress();
            var token = $api.getStorage('userInfo').token
            var uid = $api.getStorage('userInfo').id
            api.ajax({
                url: ajaxRoute.orderstatus,
                method: 'post',
                data: {
                    values: {
                        token: token,
                        page: that.page,
                        status: that.id
                    }
                }
            }, function(res, err) {
                api.hideProgress();
                console.log(JSON.stringify(res))
                if (res.code == 1) {

                    var s = res.data
                    for (var i = 0; i < s.length; i++) {
                        that.list.push(s[i])
                    }
                    that.$nextTick(function() {
                        cacheDataImg2()
                    })
                    that.loading = false
                    if (res.data.length == 0) {
                        that.loading = false
                        that.finished = true
                    } else {
                        that.loading = false
                    }
                } else if (res.code == 0) {
                    if (res.msg == '没有订单!') {
                        api.toast({ msg: '没有更多订单啦', location: 'middle' });
                        that.loading = false
                        that.finished = true
                    }
                } else {
                    api.toast({ msg: res.msg, location: 'middle' });
                }
            });
        },
    },
    filters: {
        filtersImg: function(img) {
            var imgs = ajaxUrl + '/' + img
            return imgs;
        }
    },
})
</script>
